<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/13
  Time: 16:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>渠道分类管理</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
        <script src="${path}/resources/dist/js/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
        <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    </head>
    <body>
        <div id="app">
            <template>
                <el-form :inline="true" :model="ChannelSelect" class="user-search">
                    <el-form-item label="搜索：">
                        <el-input size="small" v-model="ChannelSelect.cname" placeholder="输入渠道名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                        <el-button size="small" type="primary" icon="el-icon-plus" @click="addFlag=true">添加</el-button>
                    </el-form-item>
                </el-form>

                <%--添加--%>
                <el-table :data="channelSortList" stripe border>
                    <el-table-column prop="cname" label="分类名称" width=200px></el-table-column>
                    <el-table-column prop="fname" label="父级类型" width=200px>

                    </el-table-column>
                    <el-table-column prop="ctime" label="创建时间" width=300px></el-table-column>
                    <el-table-column prop="des" label="备注" width=200px></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">

                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="editChannel(scope.row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="deletethisChannel(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog title="添加渠道" :visible.sync="addFlag" :before-close="handleClose">
                    <el-form label-width="80px" :model="addList">

                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="分类名称">
                                    <el-input type="text" v-model="addList.cname"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="父级">
                                    <template>
                                        <el-select v-model="addList.fid" placeholder="请选择">
                                            <el-option v-for="item in sortfList"
                                                       :label="item.cname"
                                                       :value="item.cid">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="备注">
                                    <el-input text="textarea" v-model="addList.des"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="是否显示">
                                    <template>
                                        <el-select v-model="addList.status" placeholder="请选择">
                                            <el-option label="显示" value=0></el-option>
                                            <el-option label="不显示" value=1></el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                    <span>
                    <el-button @click="addFlag = false">关闭</el-button>
                    <el-button @click="addChannel">提交</el-button>
                </span>
                </el-dialog>
                <%--删除--%>
                <el-dialog title="删除渠道" :visible.sync="deleteFlag" :before-close="handleClose">
                    <span>
                    <el-button @click=" deleteFlag = false">取消</el-button>
                    <el-button @click="deteleChannel">确定删除</el-button>
                </span>
                </el-dialog>
                <%--修改--%>
                <el-dialog title="修改渠道" :visible.sync="updateFlag" :before-close="handleClose">
                    <el-form label-width="80px" :model="addList">

                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="分类名称">
                                    <el-input type="text" v-model="updateList.cname"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="父级">
                                    <template>
                                        <el-select v-model="updateList.fid" placeholder="请选择">
                                            <el-option label="无父级" value=0></el-option>
                                            <el-option v-for="item in sortfList"
                                                       :label="item.cname"
                                                       :value="item.cid">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="备注">
                                    <el-input text="textarea" v-model="updateList.des"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="3">
                                <el-form-item label="是否显示">
                                    <template>
                                        <el-select v-model="updateList.status" placeholder="请选择">
                                            <el-option label="显示" :value=0></el-option>
                                            <el-option label="不显示" :value=1></el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                    <span>
                    <el-button @click="updateFlag = false">关闭</el-button>
                    <el-button @click="updateChannel">提交</el-button>
                </span>
                </el-dialog>
                <%--分页查询--%>
                <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                               layout="sizes, prev, pager, next, jumper"
                               :page-sizes="[3, 6, 9]" :total="pageInfo.total" :page-size="pageInfo.pageNum"
                               :current-page="pageInfo.page"></el-pagination>
            </template>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    addFlag: false,
                    deleteFlag: false,
                    updateFlag: false,
                    channelSortList: [],
                    ChannelSelect: {// 查询参数，搜索时的条件
                        cname: "", // 游戏名称
                        method: "showALLChannelSort",
                        nowPage: 1,
                        pageSize: 3
                    },
                    pageInfo: {
                        nowPage: 1,
                        pageSize: 2,
                        total: 3
                    },
                    addList: {
                        cname: "",
                        fid: 1,
                        des: "",
                        status: 1,
                    },
                    updateList: {
                        cid: 1,
                        cname: "",
                        fid: 1,
                        des: "",
                        status: 1,
                    },
                    sortfList: [],
                    detele: {
                        cid: "",
                    }
                },
                methods: {
                    search() {
                        var data = window.Qs.stringify(this.ChannelSelect);
                        var vm = this
                        axios.post("/channelSort.do", data).then(response => {
                            vm.channelSortList = response.data.dataList;
                            vm.pageInfo = {
                                pageSize: response.data.pageNum,// 每页显示的数据量
                                nowPage: response.data.nowPage, // 当前页
                                total: response.data.totalNum // 总条数
                            };
                        })
                        ;
                    },
                    //添加
                    addChannel() {
                        let vm = this;
                        var data = window.Qs.stringify(this.addList);
                        axios({
                            url: "/channelSort.do",
                            method: "post",
                            data: "method=addChannel&" + data,
                        }).then(function (response) {
                            if (response.data == "添加成功") {
                                alert("添加成功")
                                vm.addFlag = false;
                                vm.search()
                            }
                        })

                    },
                    //修改
                    editChannel(row) {
                        this.updateFlag = true;
                        this.updateList = {
                            cid: row.cid,
                            cname: row.cname,
                            fid: row.fid,
                            des: row.des,
                            status: row.status
                        }
                    },
                    updateChannel() {
                        let vm = this;
                        var data = window.Qs.stringify(this.updateList);
                        axios({
                            url: "/channelSort.do",
                            method: "post",
                            data: "method=updateChannel&" + data
                        }).then(function (response) {
                            if (response.data == "修改成功") {
                                alert("修改成功")
                                vm.updateFlag = false;
                                vm.search()
                            }
                        })
                    },
                    //删除
                    deletethisChannel(row) {
                        this.deleteFlag = true;
                        this.detele = {
                            cid: row.cid
                        }
                    },
                    deteleChannel() {
                        let vm = this;
                        var data = window.Qs.stringify(this.detele);
                        axios({
                            url: "/channelSort.do",
                            method: "post",
                            data: "method=deleteChannel&" + data
                        }).then(function (response) {
                            if (response.data == "删除成功") {
                                alert("删除成功")
                                vm.deleteFlag = false
                                vm.search()
                            }
                        })
                    },
                    currentChange(val) {// 当前页发生变化时触发的事件
                        this.ChannelSelect.nowPage = val;
                        this.search();
                    }, sizeChange(val) {// 每页显示的数据量变化时触发的事件
                        this.ChannelSelect.pageSize = val;
                        this.search();
                    },
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {
                            });
                    },
                },
                mounted() {
                    this.search();
                    let vm = this;
                    axios({
                        url: "/channelSort.do",
                        method: "post",
                        data: "method=showALLChannelf"
                    }).then(function (response) {
                        vm.sortfList = response.data
                    })
                }
            })
        </script>
    </body>
</html>
